{{# members }}
    <section class="tlp-pane">
        <div class="tlp-pane-container">
            <div class="tlp-pane-header">
                <h1 class="tlp-pane-title">
                    <i class="fa fa-users tlp-pane-title-icon"></i>{{# gettext }}Group members{{/ gettext }}
                </h1>
            </div>
            <section class="tlp-pane-section">
                <div class="tlp-table-actions">
                    {{# can_be_updated }}
                        {{^ is_dynamic_group }}
                            <form action="?group_id={{ project_id }}&ugroup_id={{ id }}"
                                  method="post"
                                  class="project-admin-members-form"
                            >
                        {{/ is_dynamic_group }}
                            {{# csrf_token }}
                                {{> csrf_token_input }}
                            {{/ csrf_token }}
                            <div class="tlp-form-element tlp-form-element-append">
                                <select
                                    name="add_user_name"
                                    id="project-admin-members-add-user-select"
                                    class="tlp-select tlp-select-adjusted"
                                    size="50"
                                    data-placeholder="{{# gettext }}User name{{/ gettext }}"
                                ></select>
                                <button
                                    class="tlp-append tlp-button-primary"
                                    {{# is_dynamic_group }}
                                        id="project-admin-add-dynamic-modal"
                                        data-is-dynamic-group="{{ is_dynamic_group }}"
                                        data-target-modal-id="add-user-to-dynamic-ugroup"
                                        data-project-id="{{ project_id }}"
                                        data-ugroup-id="{{ id }}"
                                    {{/ is_dynamic_group }}
                                >
                                    <i class="fa fa-plus tlp-button-icon" id="project-administration-add-dynamic-ugroup-icon"></i> {{# gettext }}
                                    Add member{{/ gettext }}
                                </button>
                            </div>
                        {{^ is_dynamic_group }}
                            <input type="hidden" name="action" value="edit_ugroup_members">
                            </form>
                        {{/ is_dynamic_group }}
                        {{# is_dynamic_group}}
                            {{> ugroup-add-project-administrator-modal }}
                        {{/ is_dynamic_group }}
                    {{/ can_be_updated }}
                    <div class="tlp-table-actions-spacer"></div>
                    <div class="tlp-form-element tlp-table-actions-element">
                        <input type="search"
                               class="tlp-search tlp-table-actions-filter"
                               id="project-admin-ugroups-list-table-filter"
                               data-target-table-id="project-admin-ugroups-members-table"
                               autocomplete="off"
                               placeholder="{{# gettext }}Filter by name{{/ gettext }}">
                    </div>
                </div>
                <table class="tlp-table" id="project-admin-ugroups-members-table">
                    <thead>
                    <tr>
                        <th class="tlp-table-cell-filterable">{{# gettext }}Name{{/ gettext }}</th>
                        <th></th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr class="tlp-table-empty-filter">
                        <td colspan="2" class="tlp-table-cell-empty">
                            {{# gettext }}There isn't any matching members{{/ gettext }}
                        </td>
                    </tr>
                    {{^ has_members }}
                        <tr>
                            <td colspan="2" class="tlp-table-cell-empty">
                                {{# gettext }}This group does not have any members yet.{{/ gettext }}
                            </td>
                        </tr>
                    {{/ has_members }}
                    {{# has_members }}
                        {{# members }}
                            <tr>
                                <td class="tlp-table-cell-filterable">
                                    <div class="tlp-avatar projectadmin-userlist-result-name-avatar">
                                        {{# has_avatar }}
                                            <img src="/users/{{ user_name }}/avatar.png"/>
                                        {{/ has_avatar }}
                                    </div>
                                    <a href="{{ profile_page_url }}">{{ username_display }}</a>
                                </td>
                                <td class="tlp-table-cell-actions">
                                    {{# can_be_updated }}
                                        <button class="tlp-table-cell-actions-button
                                            tlp-button-small
                                            tlp-button-danger
                                            tlp-button-outline
                                            {{# is_the_last_project_admin }}
                                                tlp-tooltip
                                                tlp-tooltip-left
                                            {{/ is_the_last_project_admin }}
                                            {{# is_news_admin }}
                                                tlp-tooltip
                                                tlp-tooltip-left
                                            {{/ is_news_admin }}
                                            project-admin-remove-user-from-group"
                                            data-target-modal-id="project-admin-remove-user-from-group-modal"
                                            {{# is_the_last_project_admin }}
                                                disabled
                                                data-tlp-tooltip="{{# gettext }} The last project administrator cannot be removed.{{/ gettext }}"
                                            {{/ is_the_last_project_admin }}
                                            {{# is_news_admin }}
                                                disabled
                                                data-tlp-tooltip="{{# gettext }} You should remove user from news administrators before being able to remove him from writers.{{/ gettext }}"
                                            {{/ is_news_admin }}
                                            data-user-id="{{ user_id }}"
                                            data-user-name="{{ username_display }}"
                                            data-ugroup-name="{{ name }}"
                                        >
                                            <i class="fa fa-trash-o tlp-button-icon"></i> {{# gettext }}Remove from users group{{/ gettext }}
                                        </button>
                                    {{/ can_be_updated }}
                                </td>
                            </tr>
                        {{/ members }}
                    {{/ has_members }}
                    </tbody>
                </table>
                {{> ugroup-settings-member-remove-modal }}
            </section>
        </div>
    </section>
{{/ members }}
